<template>
  <div class="head">
    <div class="sideBar">
      <van-icon @click="showPopup" name="bars" size="30" />
      <van-popup
        position="left"
        :style="{ width: '33.3%', height: '100%' }"
        v-model="show"
      >
        <van-list>
          <van-cell @click="selectFamily(item.fid)" :class="{cur:cur==item.fid}" v-for="item in productFamily" :key="item.fid" :title="item.fname" />
        </van-list>
      </van-popup>
    </div>
    <div class="search">
        <input type="text" @focus="$router.push('/search')" placeholder="请输入您感兴趣的拍品" v-model="value">
        <!-- 放大镜图标 -->
        <div class="icon" @click="$router.push('/search')">
            <svg t="1649000240089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2228" width="18" height="18"><path d="M948.032 902.784l-206.976-206.976C797.696 628.928 832 542.528 832 448c0-212.064-171.936-384-384-384S64 235.936 64 448s171.936 384 384 384c94.528 0 180.928-34.304 247.808-90.912l206.976 206.976c14.016 14.016 35.488 15.232 48 2.72C963.264 938.272 962.048 916.8 948.032 902.784zM448 768C271.264 768 128 624.736 128 448S271.264 128 448 128s320 143.264 320 320S624.736 768 448 768z" p-id="2229" fill="#d3d3d3"></path></svg>
        </div>
    </div>
    <div>
      <van-icon  name="brush-o" size="30" />
    </div>
  </div>
</template>

<script>
export default {
  props: ["productFamily"],
  data() {
    return {
      value: "",
      show: false,
      cur:''
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    // 选择类别
    selectFamily(fid){
      this.cur=fid
      const url=`api/product/family/${fid}`
      this.axios.get(url)
      .then(res =>{
        this.$emit('family',res.data.list)
      })
      this.show = false
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.head {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5em;
  background-color: rgb(254, 254, 254);
  // 所有子元素div
  >div {
    margin-top: 0.315em;
  }
  >div:last-child {
    padding-right: 1em;
  }
  display: flex;
  align-items: center;
  >.search {
    flex:1;
    width: 18.75em;
    padding: .5em;
    position: relative;
    input {
      width: 100%;
      border-radius: 50px;
      font-size: .9em;
      padding: .5em 0em;
      padding-left: 2.3em;
      background-color: #f5f5f5;
      outline: none;
      border: none;
    }
    // 放大镜图标
    >.icon {
      position: absolute;
      top: 0.81em;
      left: 1.12em;
    }

  } 
  > .sideBar {
    width: 10%;
    padding-left: .8em;
    .cur {
      background-color: #9a4145;
      color: #fff;
    }
  }
  .van-sidebar-item {
    width: 100%;
  }
}
</style>